<template>
  <a-drawer
    v-model:visible="vdata.visible"
    :mask-closable="false"
    :title=" vdata.isAdd ? '新增活动' : '修改活动' "
    width="80%"
    class="drawer-width"
    @close="onClose"
  >
  <div style="display: flex; flex-direction:row;height: 100%; ">
    <div style="background-color:#cccccc; padding: 20px;">
      <img alt="example" v-if="vdata.currentStep==0" src="./2.png"  :width="300" />
      <img alt="example" v-if="vdata.currentStep==1" src="./3.png"  :width="300" />
      <img alt="example" v-if="vdata.currentStep==2" src="./4.png"  :width="300" />
      <img alt="example" v-if="vdata.currentStep==3" src="./5.png"  :width="300" />
      <img alt="example" v-if="vdata.currentStep==4" src="./6.png"  :width="300" />
      <img alt="example" v-if="vdata.currentStep==5" src="./7.png"  :width="300" />
    </div>
    <div  style="width: auto; margin-left: 25px;">
      <a-steps 
        progress-dot 
        :current="vdata.currentStep" 
        direction="vertical"
        labelPlacement="vertical" 
      >
          <a-step title="基础信息配置" />
          <a-step title="参与条件配置" />
          <a-step title="活动规则配置" />
          <a-step title="活动奖品配置" />
          <a-step title="活动分享配置" />
          <a-step title="黑白名单配置" />
      </a-steps>
    </div>
    <a-divider  type="vertical" style="height:100%; "/>

  <div style="margin-left: 20px; flex-grow: 1; ">
    <a-form 
      v-if="vdata.currentStep==0" 
      ref="stepForm0Ref" 
      :model="vdata.saveObject"
      layout="vertical"
      labelAlign="left"
      :hideRequiredMark="true"
      :colon="false"
      labelWrap="true"
      :rules="vdata.step0Rules"
      style="margin-left: 20px;" 
    >
      <a-form-item label="活动名称" name="actName">
        <a-input
          v-model:value="vdata.saveObject['actName']"
          placeholder="不能超过20个汉字"
        />
      </a-form-item>
      <a-form-item name="actTime" label="活动时间">
        <a-range-picker v-model:value="vdata.saveObject['actTime']" value-format="YYYY-MM-DD" />
      </a-form-item>

      <a-form-item name="actDes" label="活动说明">
        <a-textarea
          v-model:value="vdata.saveObject['actDes']"
          placeholder="活动规则说明"
          :rows="4"
        />
      </a-form-item>
     
      <a-form-item  name="miniSetting" label="小程序配置">
        <a-select
          placeholder="请选择"
          :options="bankOptions"
          v-model:value="vdata.saveObject['miniSetting']"
          :field-names="{ label: 'name', value: 'id', options: 'children' }"
        />
      </a-form-item>
    </a-form>
       
    <a-form 
      v-if="vdata.currentStep==1" 
      ref="stepForm1Ref" 
      :model="vdata.saveObject"
      layout="vertical"
      labelAlign="left"
      :hideRequiredMark="true"
      :colon="false"
      labelWrap="true"
      :rules="vdata.step1Rules"
      style="margin-left: 20px;" 
    >
      <a-form-item name="actNumLimit" label="总参与次数限制">
        <a-radio-group v-model:value="vdata.saveObject['actNumLimit']">
          <a-radio class="a-radio" :value="'M0'">不限制</a-radio>
          <a-radio class="a-radio" :value="'M1'">限制</a-radio>
        </a-radio-group>
          <a-input-number v-model:value="vdata.saveObject['actLimitNum']" min="0"/>
          <span class="margin-left">次</span>
      </a-form-item>
      <a-form-item name="userNumLimit" label="统一用户可参与次数">
        <a-radio-group v-model:value="vdata.saveObject['userNumLimit']">
          <a-radio class="a-radio" :value="'M0'">不限制</a-radio>
          <a-radio class="a-radio" :value="'M1'">限制</a-radio>
        </a-radio-group>
          <a-input-number v-model:value="vdata.saveObject['userLimitNum']" min="0"/>
          <span class="margin-left">次</span>
      </a-form-item>

      <p style="text-align: center; color: green;">-高级设置-</p>
      <a-form-item name="periodNumLimit" label="周期性限制参与">
        <a-radio-group v-model:value="vdata.saveObject['periodNumLimit']">
          <a-radio class="a-radio-flex" :value="'M0'">不限制</a-radio>
          <a-radio class="a-radio-flex" :value="'M1'">
            限制每日  
            <a-input-number v-model:value="vdata.saveObject['periodLimitNum1']" style="width: 100px; margin-left: 10px" min="0">
             <template #addonAfter>次</template>
          </a-input-number>
          </a-radio>
          <a-radio class="a-radio-flex" :value="'M2'">
            限制每周  
            <a-input-number v-model:value="vdata.saveObject['periodLimitNum2']" style="width: 100px; margin-left: 10px" min="0">
             <template #addonAfter>次</template>
          </a-input-number>
          </a-radio>
          <a-radio class="a-radio-flex" :value="'M3'">
            限制每月  
            <a-input-number v-model:value="vdata.saveObject['periodLimitNum3']" style="width: 100px; margin-left: 10px" min="0">
             <template #addonAfter>次</template>
          </a-input-number>
          </a-radio>
        </a-radio-group>
        </a-form-item>

      <a-form-item name="specialNumLimit" label="特殊参与限制">
        <a-radio-group v-model:value="vdata.saveObject['specialNumLimit']">
          <a-radio class="a-radio-flex" :value="'M0'">不限制</a-radio>
          <a-radio class="a-radio-flex" :value="'M1'">
            每周几可以参与  
            <a-checkbox-group  v-model:value="vdata.saveObject['specialLimitNum1']" :options="weekOptions" />
          </a-radio>
          <a-radio :value="'M2'" style="margin-top: 40px; line-height: 40px;">
            特殊日期可以参与  
            <div :style="{ width: '300px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
             <a-calendar 
             v-model:value="vdata.saveObject['specialLimitNum2']" 
             :fullscreen="false" 
             mode="month"/>
            </div>
          </a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item name="timeNumLimit" label="参与时间限制">
        <a-radio-group v-model:value="vdata.saveObject['timeNumLimit']">
          <a-radio class="a-radio-flex" :value="'M0'">不限制</a-radio>
          <a-radio class="a-radio-flex" :value="'M1'">
            限制每个可参与天的  
            <a-range-picker v-model:value="vdata.saveObject['timeLimitNum']" value-format="YYYY-MM-DD" />
          </a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item name="doorsillNumLimit" label="参与门槛限制">
        <a-radio-group v-model:value="vdata.saveObject['doorsillNumLimit']">
          <a-radio class="a-radio-flex" :value="'M0'">不限制</a-radio>
          <a-radio class="a-radio-flex" :value="'M1'">
            前  
            <a-input-number v-model:value="vdata.saveObject['doorsillLimitNum1']" style="width: 100px; margin-left: 10px" min="0">
              <template #addonAfter>次</template>
          </a-input-number>
          免费，后消耗福分
          <a-input-number v-model:value="vdata.saveObject['doorsillLimitNum2']" style="width: 100px; margin-left: 10px" min="0">
            <template #addonAfter>次</template>
          </a-input-number>参与
          </a-radio>
        </a-radio-group>
        </a-form-item>
        <a-form-item name="typeNumLimit" label="参与限制" style="padding-bottom: 60px">
        <a-radio-group v-model:value="vdata.saveObject['typeNumLimit']">
          <a-radio class="a-radio" :value="'M0'">手机号</a-radio>
          <a-radio class="a-radio" :value="'M1'">授权</a-radio>
          <a-radio class="a-radio" :value="'M2'">地址</a-radio>
          <a-radio class="a-radio" :value="'M3'">商户号(需要登入)</a-radio>
          <a-radio class="a-radio" :value="'M4'">商户号(无需登入)</a-radio>
        </a-radio-group>
        </a-form-item >
    </a-form>

    <a-form 
      v-if="vdata.currentStep==2" 
      ref="stepForm2Ref" 
      :model="vdata.saveObject"
      layout="vertical"
      labelAlign="left"
      :hideRequiredMark="true"
      :colon="false"
      :rules="vdata.step2Rules"
      style="margin-left: 20px;" 
    >
    <a-form-item name="merNumLimit" label="单商户号总参与次数限制">
        <a-radio-group v-model:value="vdata.saveObject['merNumLimit']">
          <a-radio class="a-radio" :value="'M0'">不限制</a-radio>
          <a-radio class="a-radio" :value="'M1'">限制</a-radio>
        </a-radio-group>
          <a-input-number v-model:value="vdata.saveObject['merLimitNum']" min="0"/>
          <span class="margin-left">次</span>
      </a-form-item>
      <a-form-item name="oneMerNumLimit" label="同一商户号参数次数">
        <a-radio-group v-model:value="vdata.saveObject['oneMerNumLimit']">
          <a-radio class="a-radio" :value="'M0'">不限制</a-radio>
          <a-radio class="a-radio" :value="'M1'">限制</a-radio>
        </a-radio-group>
          <a-input-number v-model:value="vdata.saveObject['oneMerLimitNum']" min="0"/>
          <span class="margin-left">次</span>
      </a-form-item>
      <a-form-item name="merAwardNumLimit" label="同一商户号最多可参与抽奖次数限制">
        <a-radio-group v-model:value="vdata.saveObject['merAwardNumLimit']">
          <a-radio class="a-radio" :value="'M0'">不限制</a-radio>
          <a-radio class="a-radio" :value="'M1'">限制</a-radio>
        </a-radio-group>
          <a-input-number v-model:value="vdata.saveObject['merAwardLimitNum']" min="0"/>
          <span class="margin-left">次</span>
      </a-form-item>
      <a-form-item name="exchangeNumLimit" label="交易笔数同抽奖次数兑换比列">
          <a-input-number v-model:value="vdata.saveObject['exchangeNumLimit']" min="0"/>
          <span class="margin-left">笔交易可兑换抽奖机会</span>
          <a-input-number v-model:value="vdata.saveObject['exchangeLimitNum']" min="0"/>
          <span class="margin-left">次</span>
      </a-form-item>
      <a-form-item name="awardNumLimit" label="商户号一天最多可以通过交易获得多次抽奖机会">
        <a-radio-group v-model:value="vdata.saveObject['awardNumLimit']">
          <a-radio class="a-radio" :value="'M0'">不限制</a-radio>
          <a-radio class="a-radio" :value="'M1'">限制</a-radio>
        </a-radio-group>
          <a-input-number v-model:value="vdata.saveObject['awardLimitNum']" min="0"/>
          <span class="margin-left">次</span>
      </a-form-item>
      <a-form-item name="starNumLimit" label="商户星级是否影响抽奖次数">
        <a-radio-group v-model:value="vdata.saveObject['starNumLimit']">
          <a-radio class="a-radio" :value="'M0'">不影响</a-radio>
          <a-radio class="a-radio" :value="'M1'">影响</a-radio>
        </a-radio-group>
        <a-table :columns="columns" :data-source="data" bordered :pagination="false" style="margin-left: 0px;">
      </a-table>
      </a-form-item>
      
      <a-form-item name="leftNumLimit" label="未试用抽奖机会最多留存" style="padding-bottom: 60px">
        <a-radio-group v-model:value="vdata.saveObject['leftNumLimit']">
          <a-radio class="a-radio" :value="'M0'">不限制</a-radio>
          <a-radio class="a-radio" :value="'M1'">限制</a-radio>
        </a-radio-group>
          <a-input-number v-model:value="vdata.saveObject['lefLimitNum']" min="0"/>
          <span class="margin-left">次</span>
      </a-form-item>
    </a-form> 

    <a-form 
      v-if="vdata.currentStep==3" 
      ref="stepForm3Ref" 
      :model="vdata.saveObject"
      layout="vertical"
      labelAlign="left"
      :hideRequiredMark="true"
      :colon="false"
      :rules="vdata.step3Rules"
      style="margin-left: 20px;" 
    >
    <a-form-item name="pointsNumLimit" label="福分奖励">
        <a-radio-group v-model:value="vdata.saveObject['pointsNumLimit']">
          <a-radio class="a-radio" :value="'M0'">不奖励</a-radio>
          <a-radio class="a-radio" :value="'M1'">首次参与奖励</a-radio>
          <a-input-number v-model:value="vdata.saveObject['pointsLimitNum1']" min="0"/>
          <span class="margin-left">分</span>
          <br>
          <a-radio class="a-radio" :value="'M2'">每次参与奖励</a-radio>
          <a-input-number v-model:value="vdata.saveObject['pointsLimitNum2']" min="0"/>
          <span class="margin-left">分</span>
        </a-radio-group>
      </a-form-item>
      <a-form-item name="pointsNumLimit" label="奖品清单">
        <a-button ><a>新增奖品</a> </a-button>
      <a-table :columns="columns1" :data-source="data1" bordered :pagination="false" style="margin-left: 0px;">
        <template #bodyCell="{ column, text }">
      <template v-if="column.dataIndex === 'operator'">
        <a>删除</a> <a>  编辑</a>
      </template>
    </template>
      </a-table>
    </a-form-item>
      <a-form-item name="percentNumLimit" label="中奖概率设置">
        <a-radio-group v-model:value="vdata.saveObject['percentNumLimit']">
          <a-radio class="a-radio" :value="'M0'">按比例中奖</a-radio>
          <a-radio class="a-radio" :value="'M1'">顺延中奖</a-radio>
          <a-radio class="a-radio" :value="'M2'">百分之百中奖</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item name="pointsNumLimit" label="是否开启安慰奖" style="padding-bottom: 60px">
        <a-radio-group v-model:value="vdata.saveObject['pointsNumLimit']">
          <a-radio class="a-radio" :value="'M0'">开启</a-radio>
          <a-radio class="a-radio" :value="'M1'">不开启</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form> 

    <a-form 
      v-if="vdata.currentStep==4" 
      ref="stepForm4Ref" 
      :model="vdata.saveObject"
      layout="vertical"
      labelAlign="left"
      :hideRequiredMark="true"
      :colon="false"
      :rules="vdata.step4Rules"
      style="margin-left: 20px;" 
    >
    <a-form-item name="shareContent" label="活动文案分享">
      <a-textarea
          v-model:value="vdata.saveObject['shareContent']"
          placeholder="分享抽好礼"
          :rows="4"
        />
      </a-form-item>
    </a-form> 
    <a-form 
      v-if="vdata.currentStep==5" 
      ref="stepForm5Ref" 
      :model="vdata.saveObject"
      layout="vertical"
      labelAlign="left"
      :hideRequiredMark="true"
      :colon="false"
      :rules="vdata.step5Rules"
      style="margin-left: 20px;" 
    >
    <a-form-item name="whiteNumLimit" label="是否开启白名单">
      <a-radio-group v-model:value="vdata.saveObject['whiteNumLimit']">
          <a-radio class="a-radio" :value="'M0'">不开启</a-radio>
          <a-radio class="a-radio" :value="'M1'">开启</a-radio>
        </a-radio-group>
        <a-upload v-model:file-list="vdata.saveObject['fileList']" name="file"
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76">
            <a-button>
              <upload-outlined></upload-outlined>
              上传名单
            </a-button>
          </a-upload>
      <a-textarea
          v-model:value="vdata.saveObject['whiteContent']"
          placeholder="添加白名单"
          :rows="4"
        />
      </a-form-item>
      <a-form-item name="blackNumLimit" label="是否开启黑名单">
      <a-radio-group v-model:value="vdata.saveObject['blackNumLimit']">
          <a-radio class="a-radio" :value="'M0'">不开启</a-radio>
          <a-radio class="a-radio" :value="'M1'">开启</a-radio>
        </a-radio-group>
          <a-upload v-model:file-list="vdata.saveObject['fileList']" name="file"
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76">
            <a-button>
              <upload-outlined></upload-outlined>
              上传名单
            </a-button>
          </a-upload>
      <a-textarea
          v-model:value="vdata.saveObject['blackContent']"
          placeholder="添加黑名单"
          :rows="4"
        />
      </a-form-item>
    </a-form> 
  </div>

  </div>

    <div class="drawer-btn-center">
      <a-button v-if="vdata.currentStep!=0" style="margin-right:8px" @click="onSteps(-1)">
        <step-backward-outlined />
        上一步
      </a-button>
      <a-button v-if="vdata.currentStep!=5" style="margin-right:8px" @click="onSteps(1)">
        <step-forward-outlined />
        下一步
      </a-button>
      <a-button v-if="vdata.currentStep==5&&!vdata['isDetails']" type="primary" :loading="vdata.btnLoading" @click="handleOkFunc">
        <check-outlined />
        保存
      </a-button>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
import { API_URL_MARKETING_ADD,API_URL_MARKETING_UPDATE,$getMarketingDetails, req} from '@/api/manage'
import {reactive,ref,getCurrentInstance} from 'vue'
import { useUserStore } from '@/store/modules/user'

const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties
// 获取当前实例的代理对象
const { proxy }: any = getCurrentInstance()

const emit = defineEmits<{
  (event: 'change'): void
 }>()
 
  const vdata : any = reactive({
    btnLoading: false,
    isDetails:false,
    currentStep:0,
    isAdd: true, // 新增 or 修改页面标志
    saveObject: {}, // 数据对象
    recordId: null, // 更新对象ID
    visible: false, // 是否显示弹层/抽屉
    step0Rules: {
      actName: [{ required: true, message: '活动名称不能为空', trigger: 'blur' }],
      totalmoney: [{ required: true, message: '面额不能为空', trigger: 'blur' }],
      actTime: [{ required: true, message: '开始日期或结束日期不能为空', trigger: 'blur' }],
    },
    step1Rules: {
      toMoney: [{ required: true, message: '面额不能为空', trigger: 'blur' }],
      reduceMoney: [{ required: true, message: '面额不能为空', trigger: 'blur' }],
    },
    step2Rules: {
    },
    step3Rules: {
    },
    step4Rules: {
    },
    step5Rules: {
    }
  })

  const columns = [{
  title: '商户星级',
  dataIndex: 'name',
}, {
  title: '每（设定的笔数）额外增加的抽奖次数',
  dataIndex: 'money',
}]
const data = [{
  key: '1',
  name: '新增商户',
  money: '0',
}, {
  key: '2',
  name: '0星商户',
  money: '1',
}, {
  key: '3',
  name: '1星商户',
  money: '1',
}, {
  key: '4',
  name: '2星商户',
  money: '2',
}]

const columns1 = [{
  title: '奖品等级',
  dataIndex: 'grade',
}, {
  title: '奖品编号',
  dataIndex: 'no',
}, {
  title: '奖品类型',
  dataIndex: 'type',
}, {
  title: '奖品数量',
  dataIndex: 'number',
}, {
  title: '奖品价值',
  dataIndex: 'money',
}, {
  title: '中奖概率',
  dataIndex: 'percent',
}, {
  title: '操作',
  dataIndex: 'operator',
}]
const data1 = [{
  key: '1',
  grade: '安慰奖',
  no: 'SX00001',
  type: '购物卡',
  number: '1000',
  money: '10',
  percent: '90%',
},{
  key: '2',
  grade: '一等奖',
  no: 'SX00002',
  type: '购物卡',
  number: '100',
  money: '100',
  percent: '10%',
}]

// 规则时间选项
  const weekOptions = [
  { label: '周一', value: 1 },
  { label: '周二', value: 2 },
  { label: '周三', value: 3 },
  { label: '周四', value: 4 },
  { label: '周五', value: 5 },
  { label: '周六', value: 6 },
  { label: '周日', value: 7 },
]

const bankOptions = ref([
      {
        id: 'jack',
        name: '跃动营销',
      }
    ])


  /**
   * 切换步骤
   */
  function onSteps(step :number){
    if(step<0){
      vdata.currentStep--
    }else{
      proxy.$refs['stepForm' + vdata.currentStep + 'Ref'].validate().then(() => {
      vdata.currentStep++
  })
    }
  }
 
  function show (recordId,examineId,isDetails) { // 弹层打开事件
    // 数据清空
    vdata.currentStep=0
    vdata.isAdd = !recordId
    
    if(isDetails){
      vdata.isDetails=isDetails
    }else{
      vdata.isDetails=false
    }

    vdata.saveObject = { chargeType: 1, chargePerson:0,actLimit:'M0',actTip:'M2',merchantType:'M0',payType:'M0'} 
    vdata.btnLoading=false

    if (!vdata.isAdd) { // 修改信息 延迟展示弹层
      vdata.recordId = recordId
      $getMarketingDetails(recordId).then(res => {
        vdata.saveObject = JSON.parse(res.couponJson)
        Object.assign(vdata.saveObject,{couponId : recordId,examineId:examineId})
        vdata.visible = true
      }).catch(e=>{
        $infoBox.message.error("信息查询失败，请重试")
      })
    } else {
      vdata.visible = true // 立马展示弹层信息
    }
  }

  /**
   * 点击【确认】按钮事件      
   */
function handleOkFunc() {
  vdata.btnLoading = true

  // 请求接口
  var uploadObject: any = {}
  uploadObject.activeType = 3
  uploadObject.createdUid=useUserStore().userInfo.sysUserId
  uploadObject.couponId=vdata.saveObject['couponId']
  uploadObject.examineId=vdata.saveObject['examineId']
  uploadObject.couponName = vdata.saveObject['actName']
  uploadObject.sTime = vdata.saveObject['actTime'][0]
  uploadObject.eTime = vdata.saveObject['actTime'][1]
  uploadObject.couponAmount = vdata.saveObject['totalmoney'] * 100
  uploadObject.couponJson = vdata.saveObject

  var url = ""
  if (vdata.isAdd) {
    url = API_URL_MARKETING_ADD
  } else {
    url = API_URL_MARKETING_UPDATE
  }

  req.add(url, uploadObject).then(res => {
    if (vdata.isAdd) {
      $infoBox.message.success('新增成功')
    } else {
      $infoBox.message.success('修改成功')
    }
    vdata.btnLoading = false
    vdata.visible = false
    emit('change')
  }).catch(res => {
    vdata.btnLoading = false
  })

}

function onClose() {
  vdata.visible = false
}

defineExpose({
  show
})
</script>
<style lang="less" scoped>

.margin-left{
  margin-left: 10px;
}

.a-radio{
  line-height: 40px;
}
.a-radio-flex{
  display: flex;
  height: 30px;
  line-height: 30px;
  margin-top: 15px;
}

.remark{
  color: #999999;
}
</style>
